formatMoney<template>
  <div class="mypage-container">
    <!-- 用户信息卡片 -->
    <el-card class="user-info-card">
      <div class="user-info-content">
        <div class="user-level">
          <img :src="`${BASE_URL}${userData.image}`" alt="" width="30" height="30">
          {{ userData.level }}：
          <div class="progress-container">
            <el-progress  :show-text="false" :stroke-width="20" style="width: 140px;"></el-progress>
            <!-- <div class="progress-text">{{ userData.grow }}%</div> -->
          </div>
        </div>
        <div class="user-credit">
          <el-icon><CreditCard /></el-icon>
          クレジット：
          <div class="progress-container">
            <el-progress :percentage="userData.credit" :show-text="false" status="success" :stroke-width="20" style="width: 140px;"></el-progress>
            <div class="progress-text">{{ userData.credit }}%</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 数据卡片行 -->
    <div class="card-row">
      <!-- 余额卡片 -->
      <el-card class="data-card"  style="cursor: pointer;">
        <div class="card-title">残高</div>
        <div class="card-value">{{ formatMoney(userData.balance) }}<span class="currency">円</span></div>
        <div v-if="userData.freeze_money > 0" class="card-value" style="font-size: 12px;margin-top: 12px;color: #ff6600;">{{ formatMoney(userData.freeze_money) }}円(凍結)</div>
        <el-icon class="card-icon dollar"><Money /></el-icon>
      </el-card>

      <!-- 工作单卡片 -->
      <el-card class="data-card" @click="goToWorkOrders" style="cursor: pointer;">
        <div class="card-title">作業注文</div>
        <div class="card-value">{{ userData.workOrders }}</div>
        <el-icon class="card-icon document"><Document /></el-icon>
      </el-card>

      <!-- 任务列表卡片 -->
      <el-card class="data-card" @click="goToJobList" style="cursor: pointer;">
        <div class="card-title">仕事リスト</div>
        <div class="card-value">{{ userData.taskLists }}</div>
        <el-icon class="card-icon list"><List /></el-icon>
      </el-card>
    </div>

    <!-- 第二行卡片 -->
    <div class="card-row">
      <!-- 充值卡片 -->
      <el-card class="data-card" @click="goToPayment" style="cursor: pointer;">
        <div class="card-title">入金</div>
        <div class="card-value">{{ userData.payments }}<span class="currency">円</span></div>
        <el-icon class="card-icon payment"><Wallet /></el-icon>
      </el-card>

      <!-- 提款卡片 -->
      <el-card class="data-card" @click="goToWithdrawal" style="cursor: pointer;">
        <div class="card-title">出金</div>
        <div class="card-value">{{ userData.withdrawals }}<span class="currency">円</span></div>
        <el-icon class="card-icon withdraw"><Coin /></el-icon>
      </el-card>

      <!-- 交易历史卡片 -->
      <el-card class="data-card" @click="goToTransactionHistory" style="cursor: pointer;">
        <div class="card-title">取引履歴</div>
        <div class="card-value">{{ userData.transactions }}</div>
        <el-icon class="card-icon history"><Tickets /></el-icon>
      </el-card>
    </div>

    <!-- 第三行卡片 -->
    <div class="card-row">
      <!-- 总数卡片 -->
      <el-card class="data-card">
        <div class="card-title">合計チップ</div>
        <div class="card-value">0<span class="currency">円</span></div>
        <el-icon class="card-icon loan"><img src="/public/img/最后一个图标.png" alt="" style="width: 60px;height: 60px;"></el-icon>
      </el-card>
      
      <!-- 空白卡片占位 -->
      <div class="data-card-placeholder"></div>
      
      <!-- 空白卡片占位 -->
      <div class="data-card-placeholder"></div>
    </div>

    <!-- 入金弹窗 -->
    <el-dialog v-model="showPaymentDialog" title="提示" width="500px" left>
      <div style=" padding: 0px;">
        機能メンテナンスのため、チャージすることはカスタマーサービスにお問い合わせください
      </div>
      <template #footer>
        <div style="text-align: right;">
          <el-button type="primary" @click="confirmPayment">確認</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userApi ,BASE_URL } from '../../../api/index'
import { TrophyBase, CreditCard, Money, Document, List, Wallet, Coin, Tickets } from '@element-plus/icons-vue'

const router = useRouter()

// 用户数据
const userData = ref({
  level: '会員',
  levelProgress: 60,
  credit: 100,
  balance: 0,
  freeze_money: 0,
  workOrders: 0,
  taskLists: 0,
  payments: 0,
  withdrawals: 0,
  transactions: 0,
  loans: 0
})

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await userApi.getBankAccount()
    if (res.code === 1 && res.data) {
      // 更新用户数据
      userData.value = {
        ...userData.value,
        level: res.data.vip?.name || '会員',
        credit: res.data.credit || 100,
        balance: parseFloat(res.data.money) || 0,
        freeze_money: parseFloat(res.data.freeze_money) || 0,
        workOrders: res.data.order_int || 0,
        taskLists: res.data.jobs_int || 0,
        payments: parseFloat(res.data.recharge_money) || 0,
        withdrawals: parseFloat(res.data.withdrawal_money) || 0,
        transactions: res.data.details_money_int || 0,
        grow: res.data.vip.next_vip_grow || 0,
        image:res.data.vip.image || ''
      }
      console.log(userData.value.image)
    } else {
      ElMessage.error('ネットワークエラー')
    }
  } catch (error) {
    console.error('ネットワークエラー:', error)
    ElMessage.error('ネットワークエラー')
  }
}

// 格式化金额
const formatMoney = (amount) => {
  if (amount === undefined || amount === null) return '0'
  
  // 转换为数字并保留两位小数
  const num = parseFloat(amount)
  if (isNaN(num)) return '0'
  
  // 使用toLocaleString格式化数字，添加千位分隔符
  return num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
}

// 跳转到余额页面
const goToBalance = () => {
  // router.push('/user/bankaccount')
}

// 跳转到工作单页面
const goToWorkOrders = () => {
  router.push('/user/workorders')
}

// 跳转到任务列表页面
const goToJobList = () => {
  router.push('/user/joblist')
}

// 显示入金弹窗
const showPaymentDialog = ref(false)
const goToPayment = () => {
  showPaymentDialog.value = true
}

// 关闭入金弹窗
const closePaymentDialog = () => {
  showPaymentDialog.value = false
}

// 确认入金
const confirmPayment = () => {
  // ElMessage.info('機能メンテナンスのため、チャージすることはカスタマーサービスにお問い合わせください')
  showPaymentDialog.value = false
}

// 跳转到出金页面
const goToWithdrawal = () => {
  router.push('/user/withdrawal')
}

// 跳转到交易历史页面
const goToTransactionHistory = () => {
  router.push('/user/transactions')
}

// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.mypage-container {
  padding: 30px;
  max-width: 1000px;
  /* height: 100%; */
  margin: 0 auto;
}

.user-info-card {
  margin-bottom: 20px;
  background-color: #4a90e2;
  color: white;
}

.user-info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.user-level, .user-credit {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.user-level .el-icon, .user-credit .el-icon {
  margin-right: 6px;
}

.progress-container {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 10px;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: black;
  /* text-shadow: 1px 1px 2px rgba(0,0,0,0.5); */
  z-index: 10;
  pointer-events: none;
}

.card-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.data-card {
  flex: 0 0 calc(33.333% - 14px);
  background-color: #4a90e2;
  color: white;
  position: relative;
  overflow: hidden;
  /* padding: 12px; */
}

.card-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
  max-width: 180px;
}

.currency {
  font-size: 22px;
  margin-left: 5px;
}

.card-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  opacity: 0.8;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.068);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  /* border: 1px solid rgba(255, 255, 255, 0.3); */
}

.data-card-placeholder {
  flex: 0 0 calc(33.333% - 14px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card-row {
    flex-direction: column;
  }
  
  .data-card, .data-card-placeholder {
    width: 100%;
    flex: 0 0 100%;
  }
  
  .data-card-placeholder {
    display: none;
  }
  
  .user-info-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .user-level, .user-credit {
    margin-bottom: 10px;
  }
}
</style>